<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios</title>
	</head>
	
	
	<body>
		
		<!-- 显示区 -->
		<div id="app">
			输入id:<input v-model="firstName" /><br/>
			       <!-- <div  v-model="fullName"></div> -->
				   <h1  >{{fullName}}</h1>
		</div>
		
		
		
		<script  src="../js/axios.js"></script>
		<script  src="../js/vue.js"></script>
		<script>
			let  obj="科技";
			
			//不带参数的请求
			// axios.get("http://localhost:8080/user/list").then(function(result){
			// 	console.log();
			// })
			
			//带参数的请求
			// axios.get("http://localhost:8080/user/info/12").then(function(result){
			// 	console.log(result.data);
			// 	document.getElementById("app").innerText=result.data;
				
			// });
			
			//对象的方式进行提交
			
			
		
			
		const  app=new  Vue({
			el: "#app",
			data: {
				firstName: '',
				fullName: ''
			},
			methods:{
			},
			watch: {
				
				//监听的是当前的绑定的数据,监听当前对象的数据
				firstName(value){
					axios.get("http://localhost:8080/user/info/"+value).then((result)=>{
						var  obj1=result.data;
						this.fullName =obj1.name+"    "+obj1.sex+"   "+obj1.age;
						//console.log(result)
					});
				}
			}
			
		})
		</script>
	</body>
	
	
	
</html>
